<template>
	<view>
		<!-- 充值 充值记录 -->
		<cus-navbar navbar :title="$t('index35')" :rightText="$t('index90')" url="/pages/wallet/rechargeLog"></cus-navbar>
		<view class="main-padding">
			<view class="gap-30"></view>
			<view class="main-card flex justify-between align-center size-28">
				<!-- 币种 -->
				<view class="color-71">{{$t('index79')}}</view>
				<view class="">USDT</view>
			</view>
			<view class="main-card flex justify-between align-center size-28 mt-14">
				<!-- 链 -->
				<view class="color-71">{{$t('index80')}}</view>
				<view class="">{{chain_name}}</view>
			</view>
			<view class="main-card flex-center flex-direction size-28 mt-20">
				<view class="gap-30"></view>
				<view class="share-card flex-center">
					<image :src="info.qrcode" class="share-code" mode="widthFix" @click="lookImg"></image>
				</view>
				<!-- 保存二维码 -->
				<view class="share-btn" @click="saveQrcode">{{$t('index91')}}</view>
				<view class="gap-30"></view>
			</view>
			<view class="main-card mt-20 size-26">
				
				<view class="flex justify-between align-center">
					<!-- 地址 -->
					<view class="">{{$t('index92')}}</view>
					<view class="flex align-center" @click="copyAddress">
						<image src="../../static/imgs/16.png" class="img-24 mr-5"></image>
						<!-- 复制 -->
						<view class="color-main">{{$t('index93')}}</view>
					</view>
				</view>
				<view class="rech-content word-warp mt-20">{{info.address}}</view>
			</view>
			<view class="main-card mt-20 size-26">
				<!-- 充值金额 -->
				<view class="">{{$t('index98')}}</view>
				<view class="rech-content word-warp mt-20">
					<!-- 请输入充值金额 -->
					<input type="digit" v-model="amount" :placeholder="$t('index124')" class="flex-1 size-26" />
				</view>
				<!-- 上传凭证 -->
				<view class="mt-20 mb-20">{{$t('index127')}}</view>
				<!-- <image :src="url||'/static/imgs/15.png'" class="upload-img" mode="aspectFill" @click="upload"></image> -->
				<view class="rech-content word-warp mt-20">
					<!-- 请输入哈希值 -->
					<input type="text" v-model="address" :placeholder="$t('index128')" class="flex-1 size-26" />
				</view>
				<button class="main-btn mt-30" @click="submit">{{$t('index56')}}</button>
			</view>
			
			<view class="flex align-center mt-30">
				<image src="../../static/imgs/17.png" class="img-30"></image>
				<!-- 请注意 -->
				<view class="size-24 color-yellow ml-10">{{$t('index94')}}</view>
			</view>
			<view class="size-22 color-59 mt-20">
				<!-- 1、请勿向上述地址充值任何非USDT资产，否则资产不可找回。 -->
				{{$t('index95')}}</br>
				<!-- 2、最小充值金额为:0.01USDT,小于最小金额的充值将不会上账且无法退回。 -->
				{{$t('index96')}}
			</view>
			<view class="gap-30"></view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/utils/uqrcode.js';
	export default {
		data(){
			return{
				qrcode:'',
				info:{},
				url:'',
				amount:'',
				chain_name:'--',
				address:''
			}
		},
		onLoad(){
			this.$api.post('/data/api.data/chain').then(res=>{
				this.chain_name = res.chain_name
			})
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData(true)
		},
		methods:{
			loadData(refresh){
				this.$api.post('/data/api.auth.invest/channel').then(res=>{
					this.info = res.info
					if(refresh){
						this.amount = ''
						this.url = ''
						uni.stopPullDownRefresh()
					}
				})
			},
			upload(){
				uni.chooseImage({
					count: 1,
					success: chooseImageRes=> {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$api.upload('/data/api.data/upload', tempFilePaths[0]).then(res=>{
							this.url = res.url
						})
					}
				});
			},
			lookImg(){
				uni.previewImage({
					urls:[this.info.qrcode]
				})
			},
			copyAddress(){
				uni.setClipboardData({
					data: this.info.address
				})
			},
			saveQrcode(){
				this.$utils.download({
					xurl:this.info.qrcode,
					name:'qrcode'
				})
			},
			submit(){
				if(!this.amount){
					uni.showToast({
						title:this.$t('index124'),// 请输入充值金额
						icon:"none"
					})
					return
				}
				if(!this.address){
					uni.showToast({
						title:this.$t('index128'),// 请上传哈希值
						icon:"none"
					})
					return
				}
				this.$api.post('/data/api.auth.invest/recharge',{
					price: this.amount,
					img: this.url,
					recharge_id:this.info.id,
					address:this.address
				}).then(res=>{
					uni.showToast({
						title:this.$t('index58')// 提交成功
					})
					this.amount = ''
					this.url = ''
					this.address = ''
					this.loadData()
				})
			}
		}
	}
</script>

<style lang="scss">
.share-card{
	// width: 160px;
	// height: 160px;
	// background-color: #FFFFFF;
	.share-code{
		width: 150px;
		// height: 150px;
	}
}
.upload-img{
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
	}
.share-btn{
	width: 530rpx;
	height: 80rpx;
	border: 1rpx solid #00FF9A;
	color: #00FF9A;
	line-height: 78rpx;
	text-align: center;
	font-size: 26rpx;
	border-radius: 20rpx;
	margin-top: 30rpx;
	&:active{
		transform: translate(1rpx,1rpx);
	}
}
.rech-content{
	padding: 30rpx;
	border-radius: 20rpx;
	background-color: #15151B;
	color: #93949C;
}
</style>